<template>
	<view :style="{'--color': color}">
		<view class="tab_bar">
			<view class="main d-flex">
                <view class="flex-1 flexac f-column p-re" @click="tabClick(item)" v-for="(item,index) in list" :key="index">
                    <text class="iconfont size40 m-bot4" :class="[item.icon, {'color': item.path == currentPath}]"></text>
                    <view class="h6 color_66" :class="{'color': item.path == currentPath}">{{ item.name }}</view>

                    <!-- #ifdef MP-WEIXIN -->
                    <button open-type="contact" class="btn-contact" v-if="item.path == 'kefu' && startUp.service_state != 1"></button>
                    <!-- #endif -->

					<u-badge type="error" max="99" v-model="cartNum" absolute :offset="[4, 12]" v-if="item.path == '/pages/cart/cart'"></u-badge>
                </view>
            </view>
		</view>
		<view class="placeholder"></view>

        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
        props: ['shop_id', 'name'],
		data() {
			return {
				currentPath: '',
                showModal: false,
				cartNum: 0
			}
		},
		computed: {
			...mapState(['color', 'startUp', 'vid']),
            list() {
                return [
					{ name: '首页', icon: 'icon-store', path: '/pages/store/storeIndex', query: '?shop_id=' + this.shop_id, tab: true },
                    { name: '分类', icon: 'icon-shangpinfenleiT3', path: '/otherPage/store/classifys', query: '?shopid=' + this.shop_id + '&name=' + this.name, tab: true },
                    { name: '购物车', icon: 'icon-gouwucheT2', path: '/pages/cart/cart', query: '?shop_id=' + this.shop_id },
                    { name: '客服', icon: 'icon-kefu', path: 'kefu', query: '' },
                    { name: '订单', icon: 'icon-dingdan', path: '/pages/index/orderList', query: '' }
				]
            }
		},
		mounted() {
			let pages = getCurrentPages()
			let page = pages[pages.length - 1]
			this.currentPath = '/' + page.route
			this.getCart()
		},
		methods: {
			tabClick(item) {
				if(item.path == this.currentPath) return
                if(item.path == 'kefu') {
                    if(!this.vid) return this.showModal = true
                    if(this.startUp.service_state == 1) this.toUrl('/userPage/message/consult')
                    return
                }
				if(item.tab) return this.$rectTo(item.path + item.query)
				this.toUrl(item.path + item.query)
			},
			getCart() {
				this.$http.post({
					url: '/zzj_singleSaleApi/cartList',
					data: {
						shop_id: this.shop_id
					}
				}).then((res) => {
					this.cartNum = res.cartNum || 0
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
    .tab_bar {
        width: 100%;
		background: linear-gradient(transparent, rgba(255,255,255,0.9));
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
        padding: 0 24rpx;
		padding-bottom: calc(36rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(36rpx + env(safe-area-inset-bottom));
    }
    .main {
        height: 114rpx;
		background-color: #fff;
        border-radius: 60rpx;
        box-shadow: 0rpx 6rpx 20rpx #fee0e3;
    }
	.placeholder {
		height: calc(150rpx + constant(safe-area-inset-bottom));
		height: calc(150rpx + env(safe-area-inset-bottom));
	}
</style>
